<template>
  <div class="user-comment">
    <input type="text" v-model.trim="val" placeholder="留下你的评论吧！" />

    <span>
      <van-icon size="30" name="star-o" /><i
        class="Collection"
        @click="CollectionArticle(id,img,title,body)"
        >收藏</i
      >
      <van-icon size="30" name="comment-o" @click="getValue" />
      <i class="Collection">{{ commentArr.length }}</i>
    </span>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  props: {
    commentArr: Array,
    id:String,
    img:String,
    title:String,
    body:String,
    value: String,
  },
  data() {
    return {
      val: "",
      changeArr: [],
    };
  },
  methods: {
    CollectionArticle(id,img,title,body) {


      let articleList = localStorage.articleList
        ? JSON.parse(localStorage.articleList)
        : [];

      let resultsto = articleList.find((c) => c.id == id);

      if (!resultsto) {
        localStorage.articleList = JSON.stringify([
          ...articleList,
          {
            id: id,
            img: img,
            title: title,
            body: body,
          },
        ]);

      Toast.success('收藏成功');
      }

      else if(resultsto) {
        localStorage.articleList = JSON.stringify(articleList.filter(item => item.id !== id))
        Toast('取消收藏');
      }

    },
     getValue() {
      var myDate = new Date();
      var year = myDate.getFullYear();
      var month = myDate.getMonth() + 1
      var data = myDate.getDate()
      var hours = myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours()
      var min = myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes()
      var second = myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds()
      console.log(this.commentArr);
      console.log(this.val);
      this.changeArr = [...this.changeArr
        ,{
          comment: {
            content: this.val,
            createdAt: `${year}-${month}-${data} ${hours}:${min}:${second}`,
            objectId: `cc${second}`,
            userInfo: {
              createdAt: "2022-09-05 08:43:46",
              name: "阿尼亚",
              objectId: `cc${second}`,
              user_icon:
                "/img/head.2a642535.jpg",
            },
          },
          subComments: [],
        },
      ];
      this.$emit("changeArr",this.changeArr);
      this.val = ''
    },
  },
};
</script>

<style lang="scss" scoped>
.user-comment {
  display: flex;
  width: 100vw;
  height: 50px;
  z-index: 999;
  background-color: #eee;
  position: fixed;
  bottom: 0;

  input {
    display: inline-block;
    margin-top: 10px;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
    width: 60vw;
    height: 30px;
    border: none;
    border-radius: 10px;
  }

  span {
    display: block;
    margin-top: 10px;
    padding: 2px 0;

    .Collection {
      margin-right: 15px;
      transform: scale(0.7);
      font-size: 10px;

    }
  }
}
</style>